web12fandomcom-20200214-history
Web Design 12 Wiki
Welcome to the Web Design 12 Wiki This wiki is dedicated to Web Design 12 collaborative projects at Windermere Secondary School. Assignment: Edit this wiki to include one 'of your top tips for building an effective webpage (or website) based on the principles of design. You will need to sign up for a free account to make edits. After you log in, modify the template. Assignment 1: Top Tips for Principles of Design Instructions: Edit this section and add your own unique web design tip! 1. '''Keep it simple (KIS). '''You should keep your page simple and uncluttered. (''Mr. Kam) * Good Example: http://mrkam.ca * Bad Example: http://vancouver.craigslist.ca 2. '''Clear purpose. The website should state a clear statement of the purpose of the site and clearly show what it is about. (Susan Wang) * Good Example: ExpressionEngine (left photo) - https://ellislab.com/expressionengine * Bad Example: Beyondis (left photo) -http://www.beyondis.co.uk/ Note: ''The actual designs for the webpage may have changed over time. The photographs shown may not be what the website currently looks like. '''3.' 'Choose good colours. '''Use contrasting colours for your background and text to make it easy to read. (''Michael Zhang) * Good Example: http://www.ubc.ca/ * Bad Example: http://www.wrdaonline.org/ 4. Get the important things out in the open. Make it easy for your readers to find what they need. Include a search box. (Adrian Macapobre) * Good Example: http://www.bestbuy.ca/ * Bad Example: http://www.target.ca/ (no search box) 5. Make sure your website doesn't have too much clutter. 'It helps to make website navigation easier for the readers. (''Darren T.) * Good example: http://www.google.ca * Bad example: http://www.yahoo.ca 6. 'Clear layouts. Website that guides the user towards useful info. Contrasting and appealing colours. '(Andrew Wang) * Clean navigation tabs, aswell as recent articles The Verge * Clustered text, random checkboxes, unclean interface aswell as a plethera of links that are not waiting to be clicked Eurogamer 7. 'Always test your webpage before publishing. '(Victor) * Check if there are any typos, errors, broken links etc. * Bad Example: https://www.healthcare.gov/small-businesses/employers/ 8. 'Don't make the users sign up for anything. '''Sign ups provide stress and is also time consuming for the users. (''Justin) * Make sure signing up to have special features is an option, not a choice. * what not to do: http://www.smashingmagazine.com/images/10-usability-principles/stikkit.jpg 9. 'Do not add flashy content to your site and keep away from over designing. '(Brendan) * Bad example: http://www.angelfire.com/super/badwebs/ * Keep the design of the website to be simple and effective. 10. 'Navigation. '''Navigating the website should be easy and fast. (''Steven) * Good Example: https://twitter.com/ * Bad Example: http://mimarch.net/ * Mobile Friendly. It is now very common that people would access websites from devices like cellphones. Making the webpage compatible to different devices is essential for users who prefer mobile internet access. (Johnny Zheng) ** Good Example:https://www.youtube.com/ ** One that is not mobile friendly:http://mrkam.ca/ 11. 'Keep text visible, clear. '''You should always keep text, and other information legible so that visitors may understand the purpose of the website. (''Nabee) * Great Example: http://www.mrkam.ca * Bad Example: http://bit.ly/1tTwvCo 12. 'Make you website adaptable to different screens. '''Your website should not become unusable when using zoom or with a different screen resolution. (''Wesly Wong) * Good Example: http://www.free-css.com/ * One that doesn't work well with zoom/screen changes: https://docs.google.com/document/d/1s_tkUrNJTEJ25uEfyryuVg9YrmO6a7eP7xYfJcQKHLs/edit?usp=sharing 13. '''Don’t make users think. The web-page should be obvious and self explanatory. When you’re creating a site, your job is to get rid of the question marks. (Christopher Alvaro) * Good Example: http://www.mediovski.com/ * Bad Example: http://spotmetering.com/ 14. Page should load fast.'Website should load fast or else user will grow impatience and leave. (''Jason Nguyen) * good example:https://www.google.ca/ * Slow website:http://www.chicagotribune.com/ 15. Functionality. Webpage should work as the creator intended it to. ' (''Kyle Fong) * Good example: http://www.facebook.com/ * Bad example: http://weparty.wix.com/sstop/ 16. 'Appropriate Font. '''The text on the webpage should use an appropriate font. (''Jordan Cheung) * Good example https://www.google.ca/ * Bad example http://www.pennyjuice.com/htmlversion/whoispj.htm 17. 'Usability. '''Make sure all the features on the website work properly. The feature might as well not exist if its not usable (''Eddie Chan) * Good Example: http://go.vsb.bc.ca/schools/windermere/Pages/default.aspx * Bad Example: http://www.computerhope.com/issues/broken.gif 18. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. 19. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. 20. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. 21. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. 22. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. 23. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. 24. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. 25. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. 26. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. 27. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. 28. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. 29. 'Brief description. '''You should also provide a brief explanation to elaborate on your brief description. (''Name in italics) * Provide an example of what you should do. You may add an image if you wish. * Provide another example of what you should NOT do. Category:Browse